<!doctype html>
<!--[if IE 7 ]>
<html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>.attr() | jQuery API Documentation</title>

    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="../../jquery-wp-content/themes/jquery.com/i/favicon.ico">

    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="../../jquery-wp-content/themes/api.jquery.com/style.css">

    <script src="../../jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="../../jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="../../jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try {
        Typekit.load();
    } catch (e) {
    }</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
    <link rel="stylesheet" href="../../jquery-wp-content/themes/jquery/css/docsearch.css">

    <link rel='https://api.w.org/' href='../wp-json/'/>
    <meta name="generator" content="WordPress 4.5.2"/>
    <link rel="alternate" type="application/json+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fattr%2F"/>
    <link rel="alternate" type="text/xml+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fattr%2F&#038;format=xml"/>

</head>
<body class="api jquery single single-post postid-37 single-format-standard single-author singular">

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery
                        Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">Plugins</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
                            <li><a href="https://contribute.jquery.org/code/">Code</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">Events</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">Learning Center</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">Forums</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">Commercial Support</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">Join</a></li>
                            <li><a href="https://js.foundation/about/members">Members</a></li>
                            <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
                            <li><a href="https://js.foundation/about/donate">Donate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>

<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a>
        </h2>

        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img
                        src="../../jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation"
                        alt="Support the JS Foundation" width="400" height="100"></a>
            </div>
        </aside>
    </div>

    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="../../jquery.com/download/">下载</a></li>
                <li class="menu-item current"><a href="../">API 文档</a></li>
                <li class="menu-item"><a href="../../blog.jquery.com/">博客</a></li>
                <li class="menu-item"><a href="../../plugins.jquery.com/">插件</a></li>
                <li class="menu-item"><a href="../../jquery.com/browser-support/">浏览器支持</a></li>
            </ul>
        </div>

        <form method="get" class="searchform" action="../">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery API Documentation</span>
                <input type="text" name="s" value=""
                       placeholder="搜索">
            </label>
        </form>
    </nav>

    <div id="content-wrapper" class="clearfix row">

        <div class="content-right twelve columns">
            <div id="content">
                <article id="post-37"
                         class="post-37 post type-post status-publish format-standard hentry category-attributes category-general-attributes category-65 category-67 category-82">
                    <header class="entry-header">
                        <h1 class="entry-title">.attr()</h1>
                        <hr>
                        <div class="entry-meta">
                            类别：<span class="category"><a href="../category/attributes/">Attributes</a></span><span
                                class="category-divider"> | </span><span class="category"><a
                                href="../category/manipulation/">Manipulation</a> &gt; <a
                                href="../category/manipulation/general-attributes/">General Attributes</a></span></div>
                        <!-- .entry-meta -->
                    </header><!-- .entry-header -->
                    <div class="entry-content">
                        获取匹配元素集中第一个元素的特性值，或为每个匹配元素设置一个或多个特性。
                        <div class="toc">
                            <h4><span>目录：</span></h4>
                            <ul class="toc-list">
                                <li>
                                    <a href="#attr1">.attr( attributeName )</a>
                                    <ul>
                                        <li><a href="#attr-attributeName">.attr( attributeName )</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#attr2">.attr( attributeName, value )</a>
                                    <ul>
                                        <li><a href="#attr-attributeName-value">.attr( attributeName, value )</a></li>
                                        <li><a href="#attr-attributes">.attr( attributes )</a></li>
                                        <li><a href="#attr-attributeName-function">.attr( attributeName, function )</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <article id="attr1" class="entry method"><h2 class="section-title">
                            <span class="name">.attr( attributeName )</span><span class="returns">返回：<a
                                href="../Types/index.html#String">String</a></span>
                        </h2>
                            <div class="entry-wrapper">
                                <p class="desc"><strong>描述：</strong>获取匹配元素集中第一个元素的特性值。</p>
                                <ul class="signatures">
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.0/">1.0</a></span><a
                                                id="attr-attributeName" href="#attr-attributeName"><span
                                                class="icon-link"></span>.attr( attributeName )</a>
                                        </h4>
                                        <ul>
                                            <li id="attr-attributeName-attributeName">
                                                <div><strong>attributeName</strong></div>
                                                <div>Type: <a href="../Types/index.html#String">String</a>
                                                </div>
                                                <div>要获取的特性的名称。</div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="longdesc" id="entry-longdesc">
                                    <p><code>.attr()</code>方法仅获取匹配集中<em
                                    >第一个</em>元素的特性值。要单独获取每个元素的值，请使用循环构造，如jQuery的<code
                                    >.each()</code>或<code>.map()</code>方法。 </p>
                                    <p>使用jQuery的<code>.attr()</code>方法获取元素特性的值有两个主要好处：</p>
                                    <ol>
                                        <li>
                                            <strong>方便</strong>：它可以直接在jQuery对象上调用，并链接到其他jQuery方法。
                                        </li>
                                        <li>
                                            <strong>跨浏览器一致性</strong>：某些特性的值在不同浏览器中报告不一致，甚至在单个浏览器的不同版本中报告也不一致。<code
                                        >.attr()</code>方法减少了这种不一致性。
                                        </li>
                                    </ol>
                                    <div class="warning">
                                        <p><strong>注意：</strong>特性值是字符串，但value和tabindex等少数特性除外。</p>
                                    </div>
                                    <p>从jQuery1.6开始，<code>.attr()</code>方法为尚未设置的特性返回<code>undefined</code
                                    >。 <strong>要检索和更改DOM属性，例如表单元素的<code>勾选</code>、<code>选中</code>或<code
                                    >禁用</code>状态，请使用<a href="../prop/"><code>.prop()</code></a>方法。
                                    </strong></p>
                                    <!--                                    <note id="svg-support" type="additional"></note>-->
                                    <h4>特性和属性对比</h4>
                                    <p><em>特性</em>和<em>属性</em>之间的差异在特定情况下可能很重要。<strong>在jQuery 1.6之前</strong>，<code
                                    >.attr()</code> 方法有时在检索某些特性时会考虑属性值，这可能会导致不一致的行为。<strong>从jQuery
                                        1.6开始</strong>，<code>.prop()</code>方法提供了一种显式检索属性值的方法，而<code>.attr()</code>则检索特性。
                                    </p>
                                    <p> 例如，要检索或设置<code>selectedIndex</code>、<code>tagName</code>, <code
                                    >nodeName</code>、<code>nodeType</code>、<code>ownerDocument</code>、<code
                                    >defaultChecked</code> 和<code>defaultSelected</code>，应该使用<code><a
                                            href="../prop/">.prop()</a></code>方法。在jQuery1.6之前，可以使用<code
                                    >.attr()</code>方法检索这些属性，但这不在<code>attr</code>的范围内。他们没有相应的特性，只是属性。</p>
                                    <p>关于布尔属性，考虑一个由HTML标记定义的DOM元素<code
                                    >&lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; /&gt;</code
                                    >，并假定它位于一个名为<code>elem</code>的JavaScript变量中：</p>
                                    <table>
                                        <tr>
                                            <th>
                                                <code>elem.checked</code>
                                            </th>
                                            <td>
                                                <code>true</code> (布尔值) 会随着复选框的状态改变
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <code>$( elem ).prop( &quot;checked&quot; )</code>
                                            </th>
                                            <td>
                                                <code>true</code> (布尔值) 会随着复选框的状态改变
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <code>elem.getAttribute( &quot;checked&quot; )</code>
                                            </th>
                                            <td>
                                                <code>&quot;checked&quot;</code> (字符串) 复选框的开始状态，不会改变。
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <code>$( elem ).attr( &quot;checked&quot; )</code>
                                                <em>(1.6+)</em>
                                            </th>
                                            <td>
                                                <code>&quot;checked&quot;</code> (字符串) 复选框的开始状态，不会改变。
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <code>$( elem ).attr( &quot;checked&quot; )</code>
                                                <em>(pre-1.6)</em>
                                            </th>
                                            <td>
                                                <code>true</code> (布尔值) 随着复选框的状态改变
                                            </td>
                                        </tr>
                                    </table>
                                    <br>
                                    <p>根据<a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.4"
                                    >W3C 表单规范</a>，<code>checked</code>特性是一个<em><a
                                            href="https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2">布尔特性</a></em>，这意味着如果该特性存在，则对应的属性为<strong>true</strong>&#x2014;即使该特性没有值或设置为空字符串值，甚至为“false”。这适用于所有布尔特性。
                                    </p>
                                    <p>然而，关于<code>checked</code>特性，要记住的最重要的概念是它与<code>checked</code
                                    >属性不对应。该特性实际上对应于<code>defaultChecked</code>属性，并且应该仅用于设置复选框的<em
                                    >初始</em> 值。<code>checked</code>特性值不会随复选框的状态而更改，而<code>checked</code
                                    >属性会随复选框的状态而更改。因此，确定是否选中复选框的跨浏览器兼容方式是使用以下属性： </p>
                                    <ul>
                                        <li>
                                            <code>if ( elem.checked )</code>
                                        </li>
                                        <li>
                                            <code>if ( $( elem ).prop( &quot;checked&quot; ) )</code>
                                        </li>
                                        <li>
                                            <code>if ( $( elem ).is( &quot;:checked&quot; ) )</code>
                                        </li>
                                    </ul>
                                    <p>其他动态特性（如<code>selected</code>和<code>value</code>）也是如此。</p>
                                </div>
                                <h3>补充说明：</h3>
                                <div class="longdesc">
                                    <ul>
                                        <li>
                                            在IE9之前，如果在从文档中（使用<a href="../removeProp/"><code>.removeProp()</code></a
                                        >）删除DOM元素之前未删除该属性，则使用<code><a href="../prop/">.prop()</a></code
                                        >将DOM元素属性设置为除简单基元值（数字、字符串或布尔值）以外的任何值，可能会导致内存泄漏。要在没有内存泄漏的情况下安全地设置DOM对象上的值，请使用<a
                                                href="../data/"><code>.data()</code></a>。
                                        </li>
                                    </ul>
                                </div>
                                <section class="entry-examples" id="entry-examples">
                                    <header><h2>示例：</h2></header>
                                    <div class="entry-example" id="example-0">
                                        <p>在复选框更改时显示checked特性和属性。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>attr demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">p</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">margin</span>: <span
                                                                class="hljs-number">20px</span> <span
                                                                class="hljs-number">0</span> <span
                                                                class="hljs-number">0</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">b</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: blue;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span
                                                                class="hljs-string">&quot;check1&quot;</span> <span
                                                                class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span
                                                                class="hljs-attr">checked</span>=<span
                                                                class="hljs-string">&quot;checked&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span
                                                                class="hljs-string">&quot;check1&quot;</span>&gt;</span>点这里<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">label</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;input&quot;</span> )</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  .change(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-keyword">var</span> $input = $( <span
                                                                class="hljs-built_in">this</span> );</code></div></div><div
                                                                class="container"><div class="line"><code>    $( <span
                                                                class="hljs-string">&quot;p&quot;</span> ).html( <span
                                                                class="hljs-string">&quot;.attr( &apos;checked&apos; ): &lt;b&gt;&quot;</span> + $input.attr( <span
                                                                class="hljs-string">&quot;checked&quot;</span> ) + <span
                                                                class="hljs-string">&quot;&lt;/b&gt;&lt;br&gt;&quot;</span> +</code></div></div><div
                                                                class="container"><div class="line"><code>      <span
                                                                class="hljs-string">&quot;.prop( &apos;checked&apos; ): &lt;b&gt;&quot;</span> + $input.prop( <span
                                                                class="hljs-string">&quot;checked&quot;</span> ) + <span
                                                                class="hljs-string">&quot;&lt;/b&gt;&lt;br&gt;&quot;</span> +</code></div></div><div
                                                                class="container"><div class="line"><code>      <span
                                                                class="hljs-string">&quot;.is( &apos;:checked&apos; ): &lt;b&gt;&quot;</span> + $input.is( <span
                                                                class="hljs-string">&quot;:checked&quot;</span> ) + <span
                                                                class="hljs-string">&quot;&lt;/b&gt;&quot;</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  })</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  .change();</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-1">
                                        <p>查找页面中第一个&lt;em&gt;的title属性。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>attr demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">em</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: blue;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">font-weight</span>: bold;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: red;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>从前有一只<span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">em</span> <span class="hljs-attr">title</span>=<span
                                                                class="hljs-string">&quot;huge, gigantic&quot;</span>&gt;</span>大型<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> 恐龙...<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code>em标签的title特性是:<span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-keyword">var</span> title = $( <span
                                                                class="hljs-string">&quot;em&quot;</span> ).attr( <span
                                                                class="hljs-string">&quot;title&quot;</span> );</code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;div&quot;</span> ).text( title );</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                </section>
                            </div>
                        </article>
                        <article id="attr2" class="entry method"><h2 class="section-title">
                            <span class="name">.attr( attributeName, value )</span><span class="returns">返回：<a
                                href="../Types/index.html#jQuery">jQuery</a></span>
                        </h2>
                            <div class="entry-wrapper">
                                <p class="desc"><strong>描述：</strong>为匹配元素集设置一个或多个特性。</p>
                                <ul class="signatures">
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.0/">1.0</a></span><a
                                                id="attr-attributeName-value" href="#attr-attributeName-value"><span
                                                class="icon-link"></span>.attr( attributeName, value )</a>
                                        </h4>
                                        <ul>
                                            <li id="attr-attributeName-value-attributeName">
                                                <div><strong>attributeName</strong></div>
                                                <div>Type: <a href="../Types/index.html#String">String</a>
                                                </div>
                                                <div>要设置的特性名称。</div>
                                            </li>
                                            <li id="attr-attributeName-value-value">
                                                <div><strong>value</strong></div>
                                                <div>类型：<a href="../Types/index.html#String">String</a> 或
                                                    <a href="../Types/index.html#Number">Number</a> 或 <a
                                                            href="../Types/index.html#Null">Null</a>
                                                </div>
                                                <div>特性要设置的值。如果是<code>null</code>，指定的特性将被删除（功能等同于<a
                                                        href="../removeAttr/"><code>.removeAttr()</code></a>）。
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.0/">1.0</a></span><a
                                                id="attr-attributes" href="#attr-attributes"><span
                                                class="icon-link"></span>.attr( attributes )</a>
                                        </h4>
                                        <ul>
                                            <li id="attr-attributes-attributes">
                                                <div><strong>attributes</strong></div>
                                                <div>类型：<a href="../Types/index.html#PlainObject">PlainObject</a>
                                                </div>
                                                <div>要设置的包含（特性-值）键值对的对象。</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">新增版本：<a
                                                    href="../category/version/1.1/">1.1</a></span><a
                                                id="attr-attributeName-function"
                                                href="#attr-attributeName-function"><span class="icon-link"></span>.attr(
                                            attributeName, function )</a>
                                        </h4>
                                        <ul>
                                            <li id="attr-attributeName-function-attributeName">
                                                <div><strong>attributeName</strong></div>
                                                <div>类型：<a href="../Types/index.html#String">String</a>
                                                </div>
                                                <div>要设置的特性名称。</div>
                                            </li>
                                            <li id="attr-attributeName-function-function">
                                                <div><strong>function</strong></div>
                                                <div>类型<a href="../Types/index.html#Function">Function</a>(
                                                    <a href="../Types/index.html#Integer">Integer</a> index, <a
                                                            href="../Types/index.html#String">String</a> attr )
                                                    =&gt;
                                                    <a href="../Types/index.html#String">String</a> or <a
                                                            href="../Types/index.html#Number">Number</a>
                                                </div>
                                                <div>返回要设置的值的函数。<code>this</code>指向当前元素。接收集合中元素的索引位置和旧特性值作为参数。
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="longdesc" id="entry-longdesc-1">
                                    <p><code>.attr()</code>方法是设置特性值的方便方法，尤其是在设置多个特性或使用函数返回的值时。例如下面的图像：</p>
                                    <div class="syntaxhighlighter xml">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">img</span> <span
                                                            class="hljs-attr">id</span>=<span class="hljs-string">&quot;greatphoto&quot;</span> <span
                                                            class="hljs-attr">src</span>=<span class="hljs-string">&quot;brush-seller.jpg&quot;</span> <span
                                                            class="hljs-attr">alt</span>=<span class="hljs-string">&quot;brush seller&quot;</span>&gt;</span></code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <h4 id="setting-simple-attr">设置一个简单的特性</h4>
                                    <p>要改变<code>alt</code>特性，只需要使用<code>.attr()</code>方法并传入该特性的名称和新的值：</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#greatphoto&quot;</span> ).attr( <span
                                                            class="hljs-string">&quot;alt&quot;</span>, <span
                                                            class="hljs-string">&quot;Beijing Brush Seller&quot;</span> );</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p><em>新增</em> 特性方法相同：</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#greatphoto&quot;</span> ).attr( <span
                                                            class="hljs-string">&quot;title&quot;</span>, <span
                                                            class="hljs-string">&quot;Photo by Kelly Clark&quot;</span> );</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <h4 id="setting-several-attrs">一次设置多个特性</h4>
                                    <p>要一次性改变<code>alt</code>特性并新增<code>title</code>，使用JavaScript对象一次传入包含着两个特性名称和值的键值对到该方法。对象中的每个键值对会新增或修改一个特性：
                                    </p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                    <div class="line n4">4</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#greatphoto&quot;</span> ).attr({</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">alt</span>: <span class="hljs-string">&quot;Beijing Brush Seller&quot;</span>,</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-attr">title</span>: <span class="hljs-string">&quot;photo by Kelly Clark&quot;</span></code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>要设置多个特性时，特性名称前后的引号可以省略。</p>
                                    <p><strong>警告：</strong>在设置 &apos;class&apos; 特性时，引号不能省略！</p>
                                    <div class="warning">
                                        <p><strong>注意：</strong>在IE8及更早版本中，使用<code>document.createElement()</code
                                        >修改<code>input</code> 或 <code>button</code>元素的<code>type</code>特性时会引发异常。</p>
                                    </div>
                                    <h4 id="computed-attr-values">计算特性值</h4>
                                    <p>通过使用函数设置特性，可以基于元素的其他特性计算值。例如，要将新值与现有值连接起来，请执行以下操作：</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>
                                                <td class="gutter">
                                                    <div class="line n1">1</div>
                                                    <div class="line n2">2</div>
                                                    <div class="line n3">3</div>
                                                </td>
                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#greatphoto&quot;</span> ).attr( <span
                                                            class="hljs-string">&quot;title&quot;</span>, <span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"> i, val </span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-keyword">return</span> val + <span
                                                            class="hljs-string">&quot; - photo by Kelly Clark&quot;</span>;</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>当一次修改多个元素的特性时，使用函数计算特性值尤其有用。</p>
                                    <p><strong>注意：</strong>如果设置函数没有返回任何值（例如<code
                                    >function(index, attr){}</code>），或者返回<code>undefined</code
                                    >，特性当前值不会改变。这对于仅在满足某些条件时才有选择地设置值非常有用。</p>
                                </div>
                                <section class="entry-examples" id="entry-examples-1">
                                    <header><h2>示例：</h2></header>
                                    <div class="entry-example" id="example-1-0">
                                        <p>给页面所有的&lt;img&gt;设置特性。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>attr demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">img</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">padding</span>: <span
                                                                class="hljs-number">10px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: red;</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">font-size</span>: <span
                                                                class="hljs-number">24px</span>;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">img</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">img</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">img</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Attribute of Ajax<span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;img&quot;</span> ).attr({</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">src</span>: <span class="hljs-string">&quot;resources/hat.gif&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">title</span>: <span
                                                                class="hljs-string">&quot;jQuery&quot;</span>,</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-attr">alt</span>: <span class="hljs-string">&quot;jQuery Logo&quot;</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;div&quot;</span> ).text( $( <span
                                                                class="hljs-string">&quot;img&quot;</span> ).attr( <span
                                                                class="hljs-string">&quot;alt&quot;</span> ) );</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-1-1">
                                        <p>根据页面中的位置设置div的id。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                        <div class="line n20">20</div>
                                                        <div class="line n21">21</div>
                                                        <div class="line n22">22</div>
                                                        <div class="line n23">23</div>
                                                        <div class="line n24">24</div>
                                                        <div class="line n25">25</div>
                                                        <div class="line n26">26</div>
                                                        <div class="line n27">27</div>
                                                        <div class="line n28">28</div>
                                                        <div class="line n29">29</div>
                                                        <div class="line n30">30</div>
                                                        <div class="line n31">31</div>
                                                        <div class="line n32">32</div>
                                                        <div class="line n33">33</div>
                                                        <div class="line n34">34</div>
                                                        <div class="line n35">35</div>
                                                        <div class="line n36">36</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>attr demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: blue;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">span</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: red;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">b</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">font-weight</span>: bolder;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Zero-th <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>First <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Second <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">span</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;div&quot;</span> )</code></div></div><div
                                                                class="container"><div class="line"><code>  .attr( <span
                                                                class="hljs-string">&quot;id&quot;</span>, <span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"> arr </span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-keyword">return</span> <span
                                                                class="hljs-string">&quot;div-id&quot;</span> + arr;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  })</code></div></div><div
                                                                class="container"><div class="line"><code>  .each(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>    $( <span
                                                                class="hljs-string">&quot;span&quot;</span>, <span
                                                                class="hljs-built_in">this</span> ).html( <span
                                                                class="hljs-string">&quot;(id = &apos;&lt;b&gt;&quot;</span> + <span
                                                                class="hljs-built_in">this</span>.id + <span
                                                                class="hljs-string">&quot;&lt;/b&gt;&apos;)&quot;</span> );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-1-2">
                                        <p>根据图片的title特性设置src特性。</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>
                                                    <td class="gutter">
                                                        <div class="line n1">1</div>
                                                        <div class="line n2">2</div>
                                                        <div class="line n3">3</div>
                                                        <div class="line n4">4</div>
                                                        <div class="line n5">5</div>
                                                        <div class="line n6">6</div>
                                                        <div class="line n7">7</div>
                                                        <div class="line n8">8</div>
                                                        <div class="line n9">9</div>
                                                        <div class="line n10">10</div>
                                                        <div class="line n11">11</div>
                                                        <div class="line n12">12</div>
                                                        <div class="line n13">13</div>
                                                        <div class="line n14">14</div>
                                                        <div class="line n15">15</div>
                                                        <div class="line n16">16</div>
                                                        <div class="line n17">17</div>
                                                        <div class="line n18">18</div>
                                                        <div class="line n19">19</div>
                                                    </td>
                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>attr demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">img</span> <span
                                                                class="hljs-attr">title</span>=<span
                                                                class="hljs-string">&quot;hat.gif&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;img&quot;</span> ).attr( <span
                                                                class="hljs-string">&quot;src&quot;</span>, <span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-keyword">return</span> <span
                                                                class="hljs-string">&quot;resources/&quot;</span> + <span
                                                                class="hljs-built_in">this</span>.title;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <h4>演示：</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                </section>
                            </div>
                        </article>
                    </div><!-- .entry-content --></article><!-- #post-37 -->
            </div>

            <div id="sidebar" class="widget-area" role="complementary">
                <aside id="categories" class="widget">
                    <ul>
                        <li class="cat-item cat-item-1"><a href="../category/ajax/">Ajax</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-2"><a href="../category/ajax/global-ajax-event-handlers/">Global
                                    Ajax Event Handlers</a>
                                </li>
                                <li class="cat-item cat-item-3"><a href="../category/ajax/helper-functions/">Helper
                                    Functions</a>
                                </li>
                                <li class="cat-item cat-item-4"><a href="../category/ajax/low-level-interface/">Low-Level
                                    Interface</a>
                                </li>
                                <li class="cat-item cat-item-5"><a href="../category/ajax/shorthand-methods/">Shorthand
                                    Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-6 current-cat"><a href="../category/attributes/">Attributes</a>
                        </li>
                        <li class="cat-item cat-item-7"><a href="../category/callbacks-object/">Callbacks Object</a>
                        </li>
                        <li class="cat-item cat-item-8"><a href="../category/core/">Core</a>
                        </li>
                        <li class="cat-item cat-item-9"><a href="../category/css/">CSS</a>
                        </li>
                        <li class="cat-item cat-item-10"><a href="../category/data/">Data</a>
                        </li>
                        <li class="cat-item cat-item-11"><a href="../category/deferred-object/">Deferred Object</a>
                        </li>
                        <li class="cat-item cat-item-87"><a href="../category/deprecated/">Deprecated</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-90"><a href="../category/deprecated/deprecated-1.3/">Deprecated
                                    1.3</a>
                                </li>
                                <li class="cat-item cat-item-88"><a href="../category/deprecated/deprecated-1.7/">Deprecated
                                    1.7</a>
                                </li>
                                <li class="cat-item cat-item-89"><a href="../category/deprecated/deprecated-1.8/">Deprecated
                                    1.8</a>
                                </li>
                                <li class="cat-item cat-item-94"><a href="../category/deprecated/deprecated-1.9/">Deprecated
                                    1.9</a>
                                </li>
                                <li class="cat-item cat-item-93"><a href="../category/deprecated/deprecated-1.10/">Deprecated
                                    1.10</a>
                                </li>
                                <li class="cat-item cat-item-98"><a href="../category/deprecated/deprecated-3.0/">Deprecated
                                    3.0</a>
                                </li>
                                <li class="cat-item cat-item-101"><a href="../category/deprecated/deprecated-3.2/">Deprecated
                                    3.2</a>
                                </li>
                                <li class="cat-item cat-item-99"><a href="../category/deprecated/deprecated-3.3/">Deprecated
                                    3.3</a>
                                </li>
                                <li class="cat-item cat-item-100"><a href="../category/deprecated/deprecated-3.4/">Deprecated
                                    3.4</a>
                                </li>
                                <li class="cat-item cat-item-102"><a href="../category/deprecated/deprecated-3.5/">Deprecated
                                    3.5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-12"><a href="../category/dimensions/">Dimensions</a>
                        </li>
                        <li class="cat-item cat-item-13"><a href="../category/effects/">Effects</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-14"><a href="../category/effects/basics/">Basics</a>
                                </li>
                                <li class="cat-item cat-item-15"><a
                                        href="../category/effects/custom-effects/">Custom</a>
                                </li>
                                <li class="cat-item cat-item-16"><a href="../category/effects/fading/">Fading</a>
                                </li>
                                <li class="cat-item cat-item-17"><a href="../category/effects/sliding/">Sliding</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-18"><a href="../category/events/">Events</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-19"><a href="../category/events/browser-events/">Browser
                                    Events</a>
                                </li>
                                <li class="cat-item cat-item-20"><a href="../category/events/document-loading/">Document
                                    Loading</a>
                                </li>
                                <li class="cat-item cat-item-21"><a href="../category/events/event-handler-attachment/">Event
                                    Handler Attachment</a>
                                </li>
                                <li class="cat-item cat-item-22"><a href="../category/events/event-object/">Event
                                    Object</a>
                                </li>
                                <li class="cat-item cat-item-23"><a href="../category/events/form-events/">Form
                                    Events</a>
                                </li>
                                <li class="cat-item cat-item-24"><a href="../category/events/keyboard-events/">Keyboard
                                    Events</a>
                                </li>
                                <li class="cat-item cat-item-25"><a href="../category/events/mouse-events/">Mouse
                                    Events</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-26"><a href="../category/forms/">Forms</a>
                        </li>
                        <li class="cat-item cat-item-27"><a href="../category/internals/">Internals</a>
                        </li>
                        <li class="cat-item cat-item-28"><a href="../category/manipulation/">Manipulation</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-29"><a href="../category/manipulation/class-attribute/">Class
                                    Attribute</a>
                                </li>
                                <li class="cat-item cat-item-30"><a href="../category/manipulation/copying/">Copying</a>
                                </li>
                                <li class="cat-item cat-item-32"><a
                                        href="../category/manipulation/dom-insertion-around/">DOM Insertion, Around</a>
                                </li>
                                <li class="cat-item cat-item-33"><a
                                        href="../category/manipulation/dom-insertion-inside/">DOM Insertion, Inside</a>
                                </li>
                                <li class="cat-item cat-item-34"><a
                                        href="../category/manipulation/dom-insertion-outside/">DOM Insertion,
                                    Outside</a>
                                </li>
                                <li class="cat-item cat-item-35"><a href="../category/manipulation/dom-removal/">DOM
                                    Removal</a>
                                </li>
                                <li class="cat-item cat-item-36"><a href="../category/manipulation/dom-replacement/">DOM
                                    Replacement</a>
                                </li>
                                <li class="cat-item cat-item-37"><a href="../category/manipulation/general-attributes/">General
                                    Attributes</a>
                                </li>
                                <li class="cat-item cat-item-38"><a href="../category/manipulation/style-properties/">Style
                                    Properties</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-39"><a href="../category/miscellaneous/">Miscellaneous</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-40"><a
                                        href="../category/miscellaneous/collection-manipulation/">Collection
                                    Manipulation</a>
                                </li>
                                <li class="cat-item cat-item-41"><a href="../category/miscellaneous/data-storage/">Data
                                    Storage</a>
                                </li>
                                <li class="cat-item cat-item-42"><a
                                        href="../category/miscellaneous/dom-element-methods/">DOM Element Methods</a>
                                </li>
                                <li class="cat-item cat-item-43"><a href="../category/miscellaneous/setup-methods/">Setup
                                    Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-44"><a href="../category/offset/">Offset</a>
                        </li>
                        <li class="cat-item cat-item-45"><a href="../category/properties/">Properties</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-46"><a
                                        href="../category/properties/jquery-object-instance-properties/">Properties of
                                    jQuery Object Instances</a>
                                </li>
                                <li class="cat-item cat-item-47"><a
                                        href="../category/properties/global-jquery-object-properties/">Properties of the
                                    Global jQuery Object</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-92"><a href="../category/removed/">Removed</a>
                        </li>
                        <li class="cat-item cat-item-48"><a href="../category/selectors/">Selectors</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-49"><a href="../category/selectors/attribute-selectors/">Attribute</a>
                                </li>
                                <li class="cat-item cat-item-50"><a href="../category/selectors/basic-css-selectors/">Basic</a>
                                </li>
                                <li class="cat-item cat-item-51"><a
                                        href="../category/selectors/basic-filter-selectors/">Basic Filter</a>
                                </li>
                                <li class="cat-item cat-item-52"><a
                                        href="../category/selectors/child-filter-selectors/">Child Filter</a>
                                </li>
                                <li class="cat-item cat-item-53"><a
                                        href="../category/selectors/content-filter-selector/">Content Filter</a>
                                </li>
                                <li class="cat-item cat-item-54"><a
                                        href="../category/selectors/form-selectors/">Form</a>
                                </li>
                                <li class="cat-item cat-item-55"><a href="../category/selectors/hierarchy-selectors/">Hierarchy</a>
                                </li>
                                <li class="cat-item cat-item-56"><a
                                        href="../category/selectors/jquery-selector-extensions/">jQuery Extensions</a>
                                </li>
                                <li class="cat-item cat-item-57"><a
                                        href="../category/selectors/visibility-filter-selectors/">Visibility Filter</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-58"><a href="../category/traversing/">Traversing</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-59"><a
                                        href="../category/traversing/filtering/">Filtering</a>
                                </li>
                                <li class="cat-item cat-item-60"><a
                                        href="../category/traversing/miscellaneous-traversal/">Miscellaneous
                                    Traversing</a>
                                </li>
                                <li class="cat-item cat-item-61"><a href="../category/traversing/tree-traversal/">Tree
                                    Traversal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-63"><a href="../category/utilities/">Utilities</a>
                        </li>
                        <li class="cat-item cat-item-64"><a href="../category/version/">Version</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-65"><a href="../category/version/1.0/">Version 1.0</a>
                                </li>
                                <li class="cat-item cat-item-66"><a href="../category/version/1.0.4/">Version 1.0.4</a>
                                </li>
                                <li class="cat-item cat-item-67"><a href="../category/version/1.1/">Version 1.1</a>
                                </li>
                                <li class="cat-item cat-item-68"><a href="../category/version/1.1.2/">Version 1.1.2</a>
                                </li>
                                <li class="cat-item cat-item-69"><a href="../category/version/1.1.3/">Version 1.1.3</a>
                                </li>
                                <li class="cat-item cat-item-70"><a href="../category/version/1.1.4/">Version 1.1.4</a>
                                </li>
                                <li class="cat-item cat-item-71"><a href="../category/version/1.2/">Version 1.2</a>
                                </li>
                                <li class="cat-item cat-item-72"><a href="../category/version/1.2.3/">Version 1.2.3</a>
                                </li>
                                <li class="cat-item cat-item-73"><a href="../category/version/1.2.6/">Version 1.2.6</a>
                                </li>
                                <li class="cat-item cat-item-74"><a href="../category/version/1.3/">Version 1.3</a>
                                </li>
                                <li class="cat-item cat-item-75"><a href="../category/version/1.4/">Version 1.4</a>
                                </li>
                                <li class="cat-item cat-item-76"><a href="../category/version/1.4.1/">Version 1.4.1</a>
                                </li>
                                <li class="cat-item cat-item-77"><a href="../category/version/1.4.2/">Version 1.4.2</a>
                                </li>
                                <li class="cat-item cat-item-78"><a href="../category/version/1.4.3/">Version 1.4.3</a>
                                </li>
                                <li class="cat-item cat-item-79"><a href="../category/version/1.4.4/">Version 1.4.4</a>
                                </li>
                                <li class="cat-item cat-item-80"><a href="../category/version/1.5/">Version 1.5</a>
                                </li>
                                <li class="cat-item cat-item-81"><a href="../category/version/1.5.1/">Version 1.5.1</a>
                                </li>
                                <li class="cat-item cat-item-82"><a href="../category/version/1.6/">Version 1.6</a>
                                </li>
                                <li class="cat-item cat-item-83"><a href="../category/version/1.7/">Version 1.7</a>
                                </li>
                                <li class="cat-item cat-item-84"><a href="../category/version/1.8/">Version 1.8</a>
                                </li>
                                <li class="cat-item cat-item-86"><a href="../category/version/1.9/">Version 1.9</a>
                                </li>
                                <li class="cat-item cat-item-103"><a href="../category/version/1.12-and-2.2/">Version
                                    1.12 &amp; 2.2</a>
                                </li>
                                <li class="cat-item cat-item-95"><a href="../category/version/3.0/">Version 3.0</a>
                                </li>
                                <li class="cat-item cat-item-96"><a href="../category/version/3.1/">Version 3.1</a>
                                </li>
                                <li class="cat-item cat-item-104"><a href="../category/version/3.2/">Version 3.2</a>
                                </li>
                                <li class="cat-item cat-item-105"><a href="../category/version/3.3/">Version 3.3</a>
                                </li>
                                <li class="cat-item cat-item-106"><a href="../category/version/3.4/">Version 3.4</a>
                                </li>
                                <li class="cat-item cat-item-107"><a href="../category/version/3.5/">Version 3.5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
    </div>
</div>

<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>Books</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg"
                                 alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92"
                                 height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg"
                                 alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="150"
                                 height="188">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="../../jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg"
                                 alt="jQuery Succinctly by Cody Lindley" width="124" height="166">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
                <li><a class="icon-wrench" href="../">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights
                reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a
                    href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For
                a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a
                    href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a
                    href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on
                the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are
                trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any
                affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms
                of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a
                    href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a
                        href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>

    </div>
</footer>

<script type='text/javascript' src='../wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='../wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
